<template>
    <div id="myCard">
        <header v-if="routeType == 'article'" class="header">
            <router-link :to='toRoute.art' class="toreturn" replace><i class="el-icon-arrow-left"></i></router-link>请选择名帖<router-link :to='toRoute.art' class="tosure" replace>确定</router-link>
        </header>
        <header v-else-if="routeType == 'trend'" class="header">
            <router-link :to='toRoute.tre' class="toreturn" replace><i class="el-icon-arrow-left"></i></router-link>请选择名帖<router-link :to='toRoute.tre' class="tosure" replace>确定</router-link>
        </header>
        <header v-else-if="routeType == 'apply'" class="header">
            <span class="toreturn"><i onclick="history.go(-1)" class="el-icon-arrow-left"></i></span>请选择名帖<span class="tosure" @click="toapply">确定</span>
        </header>
        <header v-else class="header">
            <router-link :to='toRoute.pro' class="toreturn" replace><i class="el-icon-arrow-left"></i></router-link>请选择名帖<router-link :to='toRoute.pro' class="tosure" replace>确定</router-link>
        </header>

        <scroller snappingHeight="10" class="scroller" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
            <div class="receiveitem" v-for="(item,index) in cardLists" @click="toEmit(item.id)" :key="index" :class="{hasBottom:index==0}">
                <div class="userinfo">
                    <i><img v-if="item.cplogo" :src="baseurl.baseUrl+item.cplogo"><span v-else>{{item.cname.substr(0,1)}}</span></i>
                    <p>{{item.cname}}</p>
                </div>
                <div class="icons"><el-checkbox :checked="chooseArr.indexOf(item.id)>=0" @change="chooseCard(item.id)" fill="#d6d6d6"></el-checkbox></div>
            </div>                 
        </scroller>
    </div>
</template>

<script>
let perPage = 10;
import {apply} from '../../card/card.js'
import {isCreateCard} from '../../../js/dataServe.js'
import {baseUrl} from '../../../config/env'
export default {
    data(){
        return {
            cardLists:[],
            baseurl:{baseUrl},
            noData: '',
            nowPage:1,
            chooseArr:this.$store.state.publicCard,
            routeType:this.$route.query.type,
            toRoute:{
                art:'/card/addArticle',
                pro:'/card/addProduce',
                tre:'/trends/add',
            }
        }
    },
    components:{},
    created(){
        
    },
    mounted(){
        this.chooseArr = this.$store.state.publicCard
    },
    methods:{
        toapply(){//申请成为下属
            let self = this;
            let cids = self.chooseArr.join(',');
            let responseData = apply('/apply/sendApply',{
                applyids:cids,
                cardid:self.$route.query.applyid
            })
            responseData.then((res)=>{
                if(res.result == 1){
                    self.$message({
                        duration: 2000,
                        message: '申请成功',
                        type: 'success'
                    })
                    self.$store.commit('emptyPublicCard');
                    self.$router.go(-1);
                }else{
                    self.$message({
                        duration: 2000,
                        message: res.msg,
                        type: 'error'
                    })
                }
            })
        },
        async infinite(done) {
                let cards = [];
                let self = this;
                if(cards.length == 0){
                    let responseData = isCreateCard();
                    await responseData.then((res)=>{
                                                    if(res.result == 1){
                                                        let lists = res.data.reverse();
                                                        if(self.routeType=='apply' || self.routeType == 'article' || self.routeType == 'trend'){
                                                            lists.forEach( (item,key) => {
                                                                cards.push(item)
                                                            })
                                                        }else{
                                                            lists.forEach( (item,key) => {
                                                                if(item.bcredit){
                                                                    cards.push(item)
                                                                }
                                                            })
                                                        }
                                                    }
                                                })
                    }
                let pageNum = Math.ceil(cards.length/perPage);
                if(self.nowPage>pageNum){
                    self.$refs.my_scroller.finishInfinite(2);
                    return;
                }else{

                    for (let i = (self.nowPage-1)*perPage; i < perPage*self.nowPage; i++) {
                        if(cards[i]){
                            self.cardLists.push(cards[i]);
                        }
                    }
                    self.nowPage++;
                    done()
                }
            

            },
        refresh(done) {
            done()
        },
        chooseCard(id){
            let self = this;
            if(self.chooseArr.indexOf(id) == -1){
                self.chooseArr.push(id)
            }else{
                let index = self.chooseArr.indexOf(id)
                self.chooseArr.splice(index, 1);
            }
            self.$store.commit('changePublicCard',{val:self.chooseArr});
        },
        toEmit(id){
            
        }
    }
}
</script>

<style scoped >
#myCard {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
}
.header{
    width:100%;
    height:3rem;
    line-height:3rem;
    background:#eee;
    color:#333;
    font-size:1.2rem;
    position: fixed;
    top: 0;
    z-index:5;
}
.receiveitem{
    position:relative;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: linear-gradient(to bottom, #00CA8D 0%,#009B6C 100%);
    border-bottom: 1px solid #dfdfdf;
    width: 80%;
    border-radius: 5px;
    margin: auto;
    margin-bottom:1rem;
}
.userinfo{
    display:flex;
}
.receiveitem i{
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    display: block;
    background: #ffffff;
    border-radius: 5rem;
}
.receiveitem p{
    height:4rem;
    line-height:4rem;
    margin-left:1rem;
    color: #fff;
}
.receiveitem i img,.receiveitem i span{
    width: 4rem;
    height: 4rem;
    border-radius: 5rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background:#999999;
    color:#ffffff;
    font-size: 1.5rem;
    line-height: 4rem;
}
.el-checkbox{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10000;
    right: 1rem;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    padding: 1rem;
    box-sizing: border-box;
}
header .toreturn{
    position: absolute;
    left: 1rem;
    color: #333;
    width: 2rem;
}
header .tosure{
    position: absolute;
    right: 1rem;
    color: #333;
}
.hasBottom{
    margin-top:1rem;
}
.scroller{
    height: auto !important;
    margin-top: 3rem;
    bottom: 0;
}
.icons{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
